<script setup>
const props = defineProps({
  title: {
    type: String,
    default: 'Culture'
  },
  dataList: {
    type: Array,
    default: () => []
  }
})

</script>

<template>
  <div class="culture-box">
    <div class="culture-box-title">
      <div class="top-line"/>
      <div class="title">{{ title }}</div>
    </div>
    <div class="box-item" v-for="(info, index) in props.dataList" :key="index"
         :style="{
      backgroundImage: `url(${info.image})`
      }">
      <div class="box-item-info">
        <div class="box-item-title">{{ info.title }}</div>
        <div class="box-item-desc">{{ info.desc }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.culture-box {
  column-count: 2;
  column-gap: 28px;

  .culture-box-title {
    height: 180px;
    text-align: left;

    .top-line {
      width: 50px;
      height: 3px;
      background-color: #CA0006;
      margin-bottom: 36px;
    }

    .title {
      font-size: 36px;
      color: #252b3a;
      font-weight: bold;
      line-height: 1;
    }
  }

  .box-item {
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    height: 350px;
    margin-bottom: 30px;
    position: relative;
    break-inside: avoid;

    .box-item-info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      box-sizing: border-box;
      padding: 0 36px 40px;
      color: #fff;

      .box-item-title {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 16px;
      }

      .box-item-desc {
        font-size: 14px;
        line-height: 1.5;
      }
    }
  }
  .box-item:hover .box-item-info {
    transform: translateY(0);
  }

}

</style>
